<template>
  <div class="auto-task scroll">
    <el-row v-for="(btn, index) in buttons" :key="index" class="el-button-my">
      <!-- icon -->
      <span class="icon iconfont" :class="btn.icon"></span>
      <!-- name -->
      <span v-text="btn.name"></span>
      <!-- swith 开关 -->
      <el-switch
        v-model="btn.switchState"
        class="rt-input"
        active-color="#13ce66"
        inactive-color="#ff4949"
        disabled
        @click.native="changeStatus($event,btn)"
      ></el-switch>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'ToolsAutoTask',
  data() {
    return {
      buttons: [
        {
          keyName: 1001,
          icon: 'jubo-lucky-money',
          name: '智能抢红包',
          switchState: false,
        },
        {
          keyName: 1002,
          icon: 'jubo-add-friend',
          name: '自动通过好友请求',
          switchState: false
        },
        {
          keyName: 1003,
          icon: 'jubo-accept',
          name: '自动通过群邀请',
          switchState: false
        },
        {
          keyName: 1004,
          icon: 'jubo-i-money',
          name: '自动收转账',
          switchState: false
        }
      ]
    }
  },
  watch: {
    // 微信改变
    wechatId(val) {
      this.modifyState()
    },
    // 配置文件改变
    autoTaskConfig(value) {
      this.modifyState()
    }
  },
  computed: {
    ...mapGetters({
      currentNavs: 'currentNavs',
      currentWechats: 'currentWechats',
      autoTaskConfig: 'nedb/autoTaskConfig',
    }),
    wechatId() {
      let nav = this.currentNavs[this.$route.name]
      let wechatId = this.currentWechats[nav]
      return wechatId
    },
  },
  methods: {
    // 修改switch的状态
    modifyState() {
      let config = this.autoTaskConfig[this.wechatId]
      if (config) {
        for (let index = 0; index < this.buttons.length; index++) {
          let flag = config[this.buttons[index].keyName]
          if (flag !== 'undefined' && flag === 0) {
            this.$set(this.buttons[index], 'switchState', true)
          } else {
            this.$set(this.buttons[index], 'switchState', false)
          }
        }
      } else {
        for (let index = 0; index < this.buttons.length; index++) {
          this.$set(this.buttons[index], 'switchState', false)
        }
      }
    },
    // 修改服务端的配置
    changeStatus($event, btn) {
      if (this.wechatId) {
        let config = {}
        config.wechatId = this.wechatId
        config.type = Number(btn.keyName)
        config.state = btn.switchState ? 1 : 0
        this.$store.dispatch('websocket/AutoTaskUpdate', config)
      } else {
        this.$message({
          message: '请先选中微信',
          type: 'warning'
        })
      }
    }
  },
  created() {
    this.$store.dispatch('websocket/AutoTaskDetailList')
  },
  mounted() {
    this.modifyState()
  }
}
</script>

<style lang="scss" scoped>
.auto-task {
  height: 100%;
  overflow-y: auto;

  display: flex;
  flex-wrap: wrap;
  //   justify-content: flex-start;
  align-content: flex-start;

  .el-button-my {
    height: 40px;
    min-height: 40px;
    width: 200px;

    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    border: solid #67c23a 1px;
    border-radius: 4px;

    .el-switch {
      margin-left: 10px;
      ::v-deep .el-switch__core,
      .el-switch__label {
        cursor: pointer;
      }
    }
  }
}
</style>
